<script setup lang="ts" name="trade">
import PickeDate from './PickeDate.vue';
import { onMounted, ref } from 'vue';
import { getWithdrawrecording } from '/@/apis/userApi';
import { useRequest } from 'vue-request';
import { i18nTranslate } from '/@/i18n';
import { useUserId } from '/@/hooks/index';
const { getUserId } = useUserId();
const userId = getUserId();
const onPickeDate = (data: any) => {
  params.value.startDate =  data[0];
  params.value.endDate =  data[1];
  params.value.pageNum = 1;
  dataList.value = [];
  onLoadData();
}
const dataList = ref<any[]>([]);
const params = ref({ 
  memberId: userId,
  pageNum: 1,
  pageSize: 10,
  startDate: '',
  endDate: '',
});
const finished = ref(false);
const loading = ref(false);
const getData = () => {
  loading.value = true;
  useRequest(getWithdrawrecording, {
    defaultParams: [params.value],
    onSuccess(result: any) {
      loading.value = false;
      if (result.records.length != params.value.pageSize) {
        finished.value = true;
      } else {
        params.value.pageNum++;
      }
      dataList.value = dataList.value.concat(result.records)
    },
    onError() {
      finished.value = true;
      dataList.value = [];
    }
  })
}
const onLoadData = () => {
  finished.value = false;
  getData();
}
onMounted(() => {
  onLoadData();
});
// @ApiModelProperty("状态 1 待审核, 2 审核通过 , 3 审核拒绝")
const status = (status: string) => {
  let obj = '';
  //审核中
  if (status === 'CREATE') {
    obj = i18nTranslate('Audit')
  }
  //成功
  if (status === 'PASS') {
    obj = i18nTranslate('Success')
  }
  //失败
  if (status === 'REJECT' || status === 'COLOSE' ) {
    obj = i18nTranslate('Fail')
  }
  return obj;
}

</script>
<template>
  <div class="withdraw">
      <div>
         <PickeDate @click="onPickeDate"></PickeDate>
      </div>
      <van-list v-if="dataList.length"  v-model:loading="loading" :finished="finished" :finished-text="dataList.length ? $t('list_load_finished') : ''" :loading-text="$t('list_loading')" @load="onLoadData">
      <div class="withdraw-list">
         <div class="li" v-for="item in dataList" :key="item.id">
           <div class="icon-box">
              <Icon name="icon-chaji"></Icon>
           </div>
           <div class="right-box"> 
              <div class="flex-between">
                  <p class="p1">{{ $t('Withdrawamount') }}</p>
                  <p class="p2"> ${{ item.balance }}</p>
              </div>
              <div class="flex-between mt-20">
                <p class="withdraw_status" :class="item.state"> {{status(item.state)}}</p>
                <p class="p3">{{ $YMDHms(item.extractTime) }}</p>
              </div>
           </div>
         </div>
      </div>
    </van-list>
    <van-empty v-else :description="$t('Nodata')" />
  </div>
</template>

<style lang="scss" scoped>
.withdraw {
  height: 100%;
  margin-top: 30px;
  .withdraw-list {
    margin-top: 22px;
    .li {
      display: flex;
      background: #242424;
      border-radius: 16px;
      padding: 37px 25px 34px 22px;
      margin-bottom: 20px;
      .icon-box {
        background: rgb(45, 189, 133, 0.15);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        @include center;
        margin-right: 10px;
        color: #2dbd85;
        
      }
      .mt-20 {
        margin-top: 20px;
      }
      .right-box {
        width: 85%;
      }
      .p1 {
        font-size: 30px;
        color: rgba(255, 255, 255,0.85);
        font-weight: 500;
      }
      .p2 {
        font-size: 30px;
        color: rgba(255, 255, 255,0.85);
        font-weight: 700;
      }
      .p3 {
        color: rgb(102, 102, 102);
        font-size: 24px;
      }
      .withdraw_status {
        color: #999999;
        &.REJECT {
          color: rgb(246, 69, 93);
            }
          &.PASS {
            color: rgb(45, 189, 133);
          }
        }
    }
  }
}
</style>
